<f:view xmlns="http://www.w3.org/1999/xhtml"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:h="http://java.sun.com/jsf/html"
    xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:p="http://primefaces.org/ui"
	xmlns:pm="http://primefaces.org/mobile"
	contentType="text/html"
    renderKitId="PRIMEFACES_MOBILE">

    <pm:page title="Components">

        <!-- Main View -->
        <pm:view id="main">
            <pm:header title="Mobile" swatch="b">
            </pm:header>

            <pm:content>

                <p:dataList type="inset">
                    <f:facet name="header">Components</f:facet>
                    <h:outputLink value="#forms">Forms</h:outputLink>
                    <h:outputLink value="#buttons">Buttons</h:outputLink>
                    <h:outputLink value="#lists">Lists</h:outputLink>
                    <h:outputLink value="#navbar">NavBar</h:outputLink>
                    <h:outputLink value="#panels">Panels</h:outputLink>
                </p:dataList>
                
                <p:dataList type="inset">
                    <f:facet name="header">Framework</f:facet>
                    <h:outputLink value="#ajaxStatus">Ajax Status</h:outputLink>
                    <h:outputLink value="#ajaxUpdate">Ajax Updates</h:outputLink>
                </p:dataList>
                
                <p:dataList type="inset">
                    <f:facet name="header">Navigation</f:facet>
                    <h:outputLink value="#navHandler">Navigation Handler</h:outputLink>
                    <h:outputLink value="#transitions">Transitions</h:outputLink>
                </p:dataList>

            </pm:content>

        </pm:view>

        <!-- Forms -->
        <pm:view id="forms">
            <pm:header title="Forms">
                <f:facet name="left"><p:button value="Back" icon="back" href="#main?reverse=true"/></f:facet>
            </pm:header>

            <pm:content>

                <p:inputText label="Input:" />
                
                <p:inputText label="Search:" type="search"/>
                
                <p:inputText label="Phone:" type="tel"/>
                
                <p:inputTextarea id="inputTextarea" label="Textarea:"/>
                
                <pm:field>
                    <h:outputLabel for="selectOneMenu" value="Dropdown: "/>
                    <h:selectOneMenu id="selectOneMenu">
                        <f:selectItem itemLabel="Select One" itemValue="" />
                        <f:selectItem itemLabel="Option 1" itemValue="Option 1" />
                        <f:selectItem itemLabel="Option 2" itemValue="Option 2" />
                        <f:selectItem itemLabel="Option 3" itemValue="Option 3" />
                    </h:selectOneMenu>
                </pm:field>

                <pm:inputRange id="range" minValue="0" maxValue="100" label="Range:" />

                <pm:switch id="switch" onLabel="yes" offLabel="no" label="Switch:" />
                
                <p:selectBooleanCheckbox id="booleanCheckbox" value="false" itemLabel="I agree" label="Checkbox"/>
               
                <p:selectManyCheckbox id="checkbox" label="Checkboxes: ">
                    <f:selectItem itemLabel="Option 1" itemValue="Option 1" />
                    <f:selectItem itemLabel="Option 2" itemValue="Option 2" />
                    <f:selectItem itemLabel="Option 3" itemValue="Option 3" />
                </p:selectManyCheckbox>
                
                <p:selectOneRadio id="radio" label="Radios: ">
                    <f:selectItem itemLabel="Option 1" itemValue="Option 1" />
                    <f:selectItem itemLabel="Option 2" itemValue="Option 2" />
                    <f:selectItem itemLabel="Option 3" itemValue="Option 3" />
                </p:selectOneRadio>

            </pm:content>

        </pm:view>


        <!-- Buttons -->
        <pm:view id="buttons">
            <pm:header title="Buttons">
                <f:facet name="left"><p:button value="Back" icon="back" href="#main?reverse=true"/></f:facet>
            </pm:header>

            <pm:content>

                <h3>Basic</h3>
                <p:commandButton value="Default" type="button"/>
                <p:commandButton value="With Icon" type="button" icon="check"/>
                <p:commandButton value="Icon Position" type="button" icon="refresh" iconPos="right"/>
                <p:commandButton value="Inline" type="button" icon="delete" inline="true" />

                <h3>Themes</h3>
                <p:commandButton value="Default" type="button" swatch="a"/>
                <p:commandButton value="With Icon" type="button" icon="check" swatch="b"/>
                <p:commandButton value="Icon Position" type="button" icon="refresh" iconPos="right" swatch="e"/>

                <h3>Grouping</h3>
                <pm:buttonGroup>
                    <p:commandButton value="Yes" type="button" icon="check"/>
                    <p:commandButton value="No" type="button" icon="delete"/>
                </pm:buttonGroup>
                
                <pm:buttonGroup orientation="horizontal">
                    <p:commandButton value="Yes" type="button" icon="check" />
                    <p:commandButton value="No" type="button" icon="delete" />
                </pm:buttonGroup>

            </pm:content>

        </pm:view>

        <!-- Lists -->
        <pm:view id="lists">
            <pm:header title="Lists">
                <f:facet name="left"><p:button value="Back" icon="back" href="#main?reverse=true"/></f:facet>
            </pm:header>

            <pm:content>

                <h3>Read-Only</h3>
                <p:dataList>
                    <h:outputText value="Item 1" />
                    <h:outputText value="Item 2" />
                    <h:outputText value="Item 3" />
                </p:dataList>

                <p:spacer height="10em" />

                <h3>Links</h3>
                <p:dataList>
                    <h:outputLink value="#main">Item 1</h:outputLink>
                    <h:outputLink value="#main">Item 2</h:outputLink>
                    <h:outputLink value="#main">Item 3</h:outputLink>
                    <p:separator>Divider</p:separator>
                    <h:outputLink value="#main">Item 4</h:outputLink>
                    <h:outputLink value="#main">Item 5</h:outputLink>
                    <h:outputLink value="#main">Item 6</h:outputLink>
                </p:dataList>

                <p:spacer height="10em" />

                <h3>Inset</h3>
                <p:dataList type="inset">
                    <h:outputLink value="#main">Item 1</h:outputLink>
                    <h:outputLink value="#main">Item 2</h:outputLink>
                    <h:outputLink value="#main">Item 3</h:outputLink>
                </p:dataList>
                
                <h3>Filter</h3>
                <p:dataList>
                    <f:attribute name="filter" value="true" />
                    <h:outputText value="Barcelona" />
                    <h:outputText value="Istanbul" />
                    <h:outputText value="New York" />
                    <h:outputText value="Paris" />
                </p:dataList>

                <p:spacer height="10em" />

                <h3>Custom Content</h3>
                <p:dataList value="#{ringBean.players}" var="player">
                    <p:graphicImage value="/images/barca/#{player.photo}" />
                    <h3><h:outputLink value="#main">#{player.name}</h:outputLink></h3>
                    <p>#{player.position}</p>
                    <h:outputText styleClass="ui-li-count" value="#{player.number}" />
                </p:dataList>
            </pm:content>

        </pm:view>

        <!-- NavBar -->
        <pm:view id="navbar">
            <pm:header title="NavBar">
                <f:facet name="left"><p:button value="Back" icon="back" href="#main?reverse=true"/></f:facet>
                <pm:navBar>
                    <p:button value="Home" icon="home" href="#main?reverse=true" styleClass="ui-btn-active"/>
                    <p:button value="Info" icon="info" href="#main?reverse=true" />
                    <p:button value="Search" icon="search" href="#main?reverse=true" />
                </pm:navBar>
            </pm:header>

            <pm:content>
                <pm:navBar>
                    <p:button value="Home" icon="home" href="#main?reverse=true" styleClass="ui-btn-active"/>
                    <p:button value="Info" icon="info" href="#main?reverse=true" />
                    <p:button value="Search" icon="search" href="#main?reverse=true" />
                    <p:button value="Favs" icon="star" href="#main?reverse=true" />
                    <p:button value="Setup" icon="gear" href="#main?reverse=true" />
                </pm:navBar>
            </pm:content>
        </pm:view>

        <!-- Panels -->
        <pm:view id="panels">
            <pm:header title="Panels">
                <f:facet name="left"><p:button value="Back" icon="back" href="#main?reverse=true"/></f:facet>
            </pm:header>

            <pm:content>
                <h3>Panel</h3>
                <p:panel header="Expanded">
                    Toggle panel content
                </p:panel>

                <p:panel header="Collapsed" collapsed="true">
                    Initially collapsed content
                </p:panel>
                
                <h3>Accordion Panel</h3>
                <p:accordionPanel>
                    <p:tab title="Title 1">
                        Content 1
                    </p:tab>
                    <p:tab title="Title 2">
                        Content 2
                    </p:tab>
                    <p:tab title="Title 3">
                        Content 3
                    </p:tab>
                </p:accordionPanel>

                <h3>Grid Layout</h3>

                <h4>2 Column</h4>
                <h:panelGrid columns="2">
                    <h:outputText value="Cell 1" />
                    <h:outputText value="Cell 2" />
                </h:panelGrid>

                <h4>3 Column</h4>
                <h:panelGrid columns="3">
                    <p:button value="Home" icon="home" href="#main?reverse=true" />
                    <p:button value="Info" icon="info" href="#main?reverse=true" />
                    <p:button value="Search" icon="search" href="#main?reverse=true" />
                </h:panelGrid>

                <h4>4 Column</h4>
                <h:panelGrid columns="4">
                    <h:outputText value="Cell 1" />
                    <h:outputText value="Cell 2" />
                    <h:outputText value="Cell 3" />
                    <h:outputText value="Cell 4" />

                    <h:outputText value="Cell 5" />
                    <h:outputText value="Cell 6" />
                    <h:outputText value="Cell 7" />
                    <h:outputText value="Cell 8" />
                </h:panelGrid>
                
            </pm:content>
        </pm:view>

        <pm:view id="target">
            <pm:header title="Target">
                <f:facet name="left"><p:button value="Back" icon="back" href="#main?reverse=true"/></f:facet>
            </pm:header>

            <pm:content>

                <h1>Target View</h1>

            </pm:content>
        </pm:view>
        
        <pm:view id="transitionTarget">
            <pm:header title="Transition">
                <f:facet name="left"><p:button value="Back" icon="back" href="#transitions?reverse=true"/></f:facet>
            </pm:header>

            <pm:content>

                <h1>Displayed with a transition.</h1>

            </pm:content>
        </pm:view>

        <!-- Ajax Status -->
        <pm:view id="ajaxStatus">
            <pm:header title="Ajax Status">
                <f:facet name="left"><p:button value="Back" icon="back" href="#main?reverse=true"/></f:facet>
            </pm:header>

            <pm:content>
                Core PrimeFaces Ajax implementation is integrated with jQuery Mobile's built-in ajax loading dialog indicator.

                <h:form>
                    
                    <p:commandButton value="Count" actionListener="#{counterBean.increment}" update="txt_count" process="@this"/>
                    <h3><h:outputText id="txt_count" value="Counter: #{counterBean.count}" /></h3>
                    
                </h:form>

            </pm:content>
        </pm:view>

        <!-- Ajax Update -->
        <pm:view id="ajaxUpdate">
            <pm:header title="TODO">
                <f:facet name="left"><p:button value="Back" icon="back" href="#main?reverse=true"/></f:facet>
            </pm:header>

            <pm:content>
                jQuery Mobile uses progressive enhancement on page elements to optimize them for mobile environment. This happens
                on page load and elements lose styles/behaviors attached after an ajax update. PrimeFaces fixes this mismatch
                by providing extensions whereas client side ajax of a JSF implementation causes various problems.

                <h:form>

                    <pm:field>
                        <h:outputLabel for="txt" value="Text:" />
                        <h:inputText id="txt" value="#{showcaseView.text}" />
                    </pm:field>

                    <h:panelGrid columns="2">
                        <p:commandButton value="PrimeFaces" actionListener="#{showcaseView.add}" update="txt txts" process="@form"/>
                        <h:commandButton value="JSF Impl" actionListener="#{showcaseView.add}">
                            <f:ajax render="txt txts" execute="@form"/>
                        </h:commandButton>
                    </h:panelGrid>

                    <p:dataList id="txts" var="text" value="#{showcaseView.texts}" type="inset">
                        <f:facet name="header">Values</f:facet>
                        #{text}
                    </p:dataList>

                </h:form>
            </pm:content>
        </pm:view>
        
        <!-- Navigation Handler -->
        <pm:view id="navHandler">
            <pm:header title="Navigation">
                <f:facet name="left"><p:button value="Back" icon="back" href="#main?reverse=true"/></f:facet>
            </pm:header>

            <pm:content>
                View Navigation is integrated with JSF Navigation Model. Prepending the action outcome with "pm:" enables
                mobile view-to-view navigations.

                <h:form>
                    
                    <p:commandButton value="Go to Target" action="#{showcaseView.navigate}" />
                    
                </h:form>

            </pm:content>
        </pm:view>
        
        <!-- Transitions -->
        <pm:view id="transitions">
            <pm:header title="Transitions">
                <f:facet name="left"><p:button value="Back" icon="back" href="#main?reverse=true"/></f:facet>
            </pm:header>

            <pm:content>
                Various animation types are supported in view navigations.
 
                <p:button value="Fade" href="#transitionTarget?transition=fade" />

                <p:button value="Pop" href="#transitionTarget?transition=pop" />
                
                <p:button value="Flip" href="#transitionTarget?transition=flip" />
                
                <p:button value="Turn" href="#transitionTarget?transition=turn" />
                
                <p:button value="Flow" href="#transitionTarget?transition=flow" />
                
                <p:button value="Slide" href="#transitionTarget?transition=slide" />
                
                <p:button value="SlideUp" href="#transitionTarget?transition=slideup" />
                
                <p:button value="SlideDown" href="#transitionTarget?transition=slidedown" />
                
                <p:button value="None" href="#transitionTarget?transition=none" />
                    
            </pm:content>
        </pm:view>

    </pm:page>

</f:view>